<%@ page import="com.njts.bean.Teacher" %>
<%@ page import="java.util.List" %>
<%@ page import="com.njts.bean.Class" %>
<%@ page import="com.njts.bean.Subject" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/5/24
  Time: 11:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<% List<Teacher> teacherList = (List<Teacher>) request.getAttribute("teacherList");%>
<%
    String[] titles=new String[]{"班级","姓名","年龄","性别","身份证号","民族","籍贯","薪水","科目"};
    String[] names=new String[]{"className","name","age","sex","idCard","nation","nativePlace","salary","subjectName"};
    String[] placeholder=new String[]{
            "请输入班级",
            "请输入姓名",
            "请输入年龄",
            "请输入性别",
            "请输入身份证号",
            "请输入民族",
            "请输入籍贯",
            "请输入薪水",
            "请输入科目"
    };
%>
<span style="display: inline-block; font-size: 20px;">功能区</span>
<div style="overflow: auto">
    <div class="input-group">
        <%  for(int i=0; i< names.length;i++){%>

        <div class="input-group-addon"><%= titles[i]%></div>
        <c:set var="name" value="<%=titles[i]%>"></c:set>
        <c:if test="${!name.equals('班级')&&!name.equals('科目')}" >
            <input type="text" name="<%=names[i]%>" id="input<%=names[i]%>" class="form-control" value="" required="required" pattern="" title="" placeholder="<%=placeholder[i]%>" style="width: 100px;height: 52px">
        </c:if>
        <c:if test="${name.equals('班级')}">
            <% List<Class> classList= (List<Class>) request.getAttribute("classList");%>
            <select size="2" name="class" id="inputclassId" class="form-control" required="required" style="width: 100px;">
                <option value='0' >全部</option>
                <% for(Class classes : classList){%>
                <option value="<%=classes.getId()%>"><%=classes.getName()%></option>
                <% }%>
            </select>
        </c:if>
        <c:if test="${name.equals('科目')}">
            <% List<Subject> subjectList= (List<Subject>) request.getAttribute("subjectList");%>
            <select size="2" name="class" id="inputsubjectId" class="form-control" required="required" style="width: 100px;">
                <option value='0'>全部</option>
                <% for(Subject subject : subjectList){%>
                <option value="<%=subject.getId()%>"><%=subject.getName()%></option>
                <% }%>
            </select>
        </c:if>

        <% }%>
    </div>
    <div style="display: flex;justify-content: end">

        <div class="input-group-addon" style="width:52px; line-height: 20px">id</div>
        <input type="text" name="id" id="inputid" class="form-control" value="" required="required" pattern="" title="" placeholder="请输入要修改的id" style="width: 250px">
        <button type="button" class="btn btn-success teacherUpdateButton">修改</button>
        <button type="button" class="btn btn-primary teacherAddButton">增加</button>
        <button type="button" class="btn btn-warning teacherSelectButton">搜索</button>
    </div>
</div>



<table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th>id</th>
        <% for(int i=0;i<titles.length;i++){%>
        <th><%=titles[i]%></th>
        <%}%>
        <th>操作</th>
    </tr>
    </thead>
    <tbody class="teacherTable-tbody">
    <% for(Teacher teacher : teacherList){ %>
    <tr>
        <td class="id"><%= teacher.getId() %></td>

        <td><%= teacher.getClassName()%></td>

        <td><%= teacher.getName()%></td>

        <td><%= teacher.getAge()%></td>

        <td><%= teacher.getSex()%></td>

        <td><%= teacher.getIdCard()%></td>

        <td><%= teacher.getNation()%></td>

        <td><%= teacher.getNativePlace()%></td>

        <td><%= teacher.getSalary()%></td>

        <td><%= teacher.getSubjectName()%></td>

        <td>
            <button type="button" class="btn btn-danger deleteButton">删除</button>
        </td>
    </tr>
    <%}%>
    </tbody>
</table>
<div style="display: flex;justify-content: end;">
    <%
        int teacherCount= (int) request.getAttribute("teacherCount");
        int everyPageCount= 8;
        int pageCount=teacherCount%everyPageCount==0?teacherCount/everyPageCount:teacherCount/everyPageCount+1;
    %>
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <% for(int i=1;i<=pageCount;i++){%>
        <li><a href="#"><%= i%></a></li>
        <%}%>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>
<script>
    function globalRefresh(response){
        var pattern=/<body>(\s|\S)*<\/body>/
        var data=response.toString();
        var html=pattern.exec(data)[0].replace(/<body>|<\/body>/,"").replace(/\s\\r\s/g,"").replaceAll(/\s\\n\s/g,"");
        $(".main-body").html(html);
    }
    function teacherDelete(id,tr) {
        $.ajax({
            type: "post",
            url: "/teacherDeleteById",
            data: {
                id
            },
            success: function (response) {
                console.log(response)
                if (response == "200") {
                    console.log("数据库删除成功");
                    $(tr).remove()
                    return true;
                } else {
                    console.log("数据库删除失败");
                    return false;
                }
            }
        });
    }
    function teacherAdd(teacher){
        $.ajax({
            type: "post",
            url: "/teacherAdd",
            data: teacher,
            success: function (response) {
                globalRefresh(response);
            }
        });
    }
    function teacherUpdate(teacher){
        $.ajax({
            type: "post",
            url: "/teacherUpdate",
            data: teacher,
            success: function (response) {
                globalRefresh(response);
            }
        });
    }
    function teacherSelect(teacher){
        $.ajax({
            type: "post",
            url: "/teacherSelect",
            data: teacher,
            success: function (response) {
                globalRefresh(response);
            }
        });
    }
    function getTeacher(){
        var id=$("#inputid").val();
        var name=$("#inputname").val();
        var age=$("#inputage").val();
        var sex=$("#inputsex").val();
        var idCard=$("#inputidCard").val();
        var nation=$("#inputnation").val();
        var nativePlace=$("#inputnativePlace").val();
        var classId=$("#inputclassId").val();
        var subjectId=$("#inputsubjectId").val();
        var salary=$("#inputsalary").val();

        var teacher={
            id,name,age,sex,idCard,nation,nativePlace,classId,subjectId,salary
        }
        return teacher;
    }
    $(function () {
        $(".teacherTable-tbody tr .deleteButton").on("click", function (e) {
            var tr=e.target.parentNode.parentNode;
            var id=$(tr.querySelector(".id")).text().trim();
            teacherDelete(id,tr)
        });
        $(".teacherAddButton").on("click",function(e){
            var teacher=getTeacher();
            console.log(teacher);
            teacherAdd(teacher);
        })
        $(".teacherUpdateButton").on("click",function (e){
            var teacher=getTeacher();
            teacherUpdate(teacher);
        })
        $(".teacherSelectButton").on("click",function (e){
            var teacher=getTeacher();
            teacherSelect(teacher);
        })
    })
</script>
</body>
</html>
